<script setup lang="ts">
  import { PropType, reactive, ref, watch } from 'vue';
  import { useBooleanStore } from '@/store';
  import { saveMsLargeVehicle } from '@/api/les';
  import { Notification } from '@arco-design/web-vue';
  import { done } from 'nprogress';
  import { getName, getUserJob } from '@/utils/auth';

  const showDrawer = ref<boolean>(false);
  const formRef = ref<any>();
  const booleanStore = useBooleanStore();
  const title = ref<string>('');

  const formModel = reactive({
    msLargeVehicleId: undefined,
    largeVehicleCode: '',
    createUser: '',
    updateUser: '',
  });

  const rules = {
    largeVehicleCode: [
      {
        required: true,
        message: '请输入车辆编码',
      },
    ],
  };

  function afterVisibleChange(val: any) {
    if (!val) {
      booleanStore.toggleBool(113);
    }
  }

  function handleCancel() {
    formRef.value?.resetFields();
    booleanStore.toggleBool(113);
  }

  async function handleOk() {
    const res = await formRef.value.validate();
    if (res) {
      showDrawer.value = true;
      done(false);
    } else {
      // await save();
      if (title.value === '新增大件车辆维护')
        formModel.createUser = getName() as string;
      else formModel.updateUser = getName() as string;
      const data = await saveMsLargeVehicle(formModel);
      if (data.retCode === '200') {
        Notification.success({
          title: '成功',
          content: data.message,
          closable: true,
        });
        booleanStore.toggleBool(113);
        booleanStore.watchUpdate(114);
        Object.assign(formModel, {
          msLargeVehicleId: undefined,
          largeVehicleCode: '',
        });
        done();
      } else {
        showDrawer.value = true;
        Notification.error({
          title: '失败',
          content: data.message,
          closable: true,
        });
      }
    }
  }

  // 监听弹框
  watch(
    () => booleanStore.boolValue,
    (newValue: boolean) => {
      if (!newValue) {
        showDrawer.value = newValue;
        return;
      }
      if (booleanStore.num === 113) {
        title.value = '新增大件车辆维护';
        showDrawer.value = newValue;
      } else if (booleanStore.num === 114) {
        title.value = '修改大件车辆维护';
        formModel.msLargeVehicleId = booleanStore.row.msLargeVehicleId;
        formModel.largeVehicleCode = booleanStore.row.largeVehicleCode;
        showDrawer.value = newValue;
      }
    }
  );
</script>

<template>
  <a-drawer
    v-model:visible="showDrawer"
    placement="right"
    width="30%"
    @after-visible-change="afterVisibleChange"
    @cancel="handleCancel"
    @ok="handleOk()"
  >
    <template #title> {{ title }} </template>
    <a-form ref="formRef" :model="formModel" :rules="rules">
      <a-form-item label="车辆编码" field="largeVehicleCode">
        <a-input
          v-model="formModel.largeVehicleCode"
          max-length="20"
          placeholder="请输入车辆编码"
        />
      </a-form-item>
    </a-form>
    <!-- <template #footer>
      <div class="flex-btn">
        <a-button type="primary" @click="handleOk">确认</a-button>
        <a-button class="btn-reset" @click="handleCancel">取消</a-button>
      </div>
    </template> -->
  </a-drawer>
</template>
